<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>小说评论</title>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>

  <link href="css/index.css" rel="stylesheet" type="text/css"/>
  <link href="css/novel.css" rel="stylesheet" type="text/css"/>
  <link href="css/comment.css" rel="stylesheet" type="text/css"/>

  <style>
    .user-logout{
      color: #222222;
    }
    .user-logout:hover{
      color: orange;
    }


     .comment {
       /* 添加样式 */
       margin-bottom: 20px;
       border: 1px solid #ddd;
       padding: 10px;
     }

  </style>
</head>
<body>


<div id="app">
  <div class="td-header" :class="{ 'is-sticky': isSticky }">

    <div class="td-header-content">
      <div class="td-header-logo">
        <img src="image/logo.png" />
        <li> 土豆小说网 </li>
      </div>
      <div class="td-header-right">
        <div class="right-shouye">
          <a href="index.html">首页</a>

        </div>
        <div class="right-shouye">
          <a href="bookstore.html">书库</a>

        </div>
        <div class="right-shouye">
          <a href="bookshelf.html">书架</a>

        </div>
        <div class="right-shouye">
          <a href="ranking.html">排行榜</a>

        </div>
        <div class="right-search">
          <input placeholder="请输入书名或作者名" v-model="selectneirou">
          <img @click="select()" style="cursor: pointer;width: 15px;height: 18px;" src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/%E6%90%9C%E7%B4%A21.png" />

        </div>
        <div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
        <div class="right-user">
          <a  v-if="!isLogged" href="login.html"> <div class="user-login">登录</div></a>
          <a v-if="!isLogged" href="login.html"><div class="user-reg">注册</div></a>
          <div v-if="isLogged" style="display: flex; align-items: center;cursor: pointer;"  >
            <el-avatar   icon="el-icon-user-solid" :src="this.user.avatar"> </el-avatar>
            <span @click="geren()"  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.user.username}} </span>
          </div>
          <div v-if="isLogged" style="display: flex; align-items: center;">
            <span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
          </div>

        </div>



      </div>
    </div>
  </div>

  <div class="td-novel">
    <div class="td-novel-page">
      <div class="novel-page-zhong">

        <div class="page-info">
          <div class="cover_image">
            <img :src="novel.coverImage" />

          </div>
          <div class="info">
            <div class="info-name"><h1>{{novel.title}}</h1></div>
            <div class="info-label">

              <span class="info-label-yellow" v-if="novel.statu == 1">连载中</span>
              <span class="info-label-yellow" v-else-if="novel.statu == 0">已完结</span>
              <span class="info-label-grey">{{novel.categoryName}}</span>
            </div>
            <div class="info-count">
              <div class="info-count-word">
                <span class="detail">{{this.bookCount}}</span>
                <span class="text">万字</span>
              </div>
            </div>
            <div class="info-last">
              <a href="#" class="chapter-item-title" target="_blank">
                <span class="info-last-title">最近更新：{{this.chapterzuihou}}</span>
              </a>
              <span class="info-last-time">{{this.Time}}</span>
            </div>
            <el-rate
                    style="margin-top: 10px;"
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
            </el-rate>
          </div>

          <div class="author">
            <div class="author-divider"></div>
            <div class="author-info">

              <a>
                <div class="author-name">
                  <span class="author-name-logo"></span>
                  <span class="author-name-text">{{author.authorName}}</span>
                </div>
              </a>
              <div class="author-desc">{{author.motto}}</div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="page-body-wrap">
      <div class="page-body">
        <div class="page-abstract-header"><h2>我的评论</h2></div>


        <el-input
                style=" width: 90%;margin-left: 5%;margin-top: 30px;"
                type="textarea"
                placeholder="请输入内容"
                v-model="comment.content"
                maxlength="100"
                size="medium"
                show-word-limit>
        </el-input>
        <div class="block" style=" display: flex; width: 200px; margin-left: 5%;margin-top: 10px;">
          <el-rate
                  v-model="comment.score"
                  :colors="colors">
          </el-rate>

        </div>
          <el-button round @click="submitComment()"  style="float: right; margin-right: 10%;">发表评论</el-button>




        <div class="page-abstract-header" style="margin-top: 50px;"><h2>小说评论</h2></div>


        <div  v-for="c  in comment1" style="width: 90%; margin: 40px auto 20px; border: 1px solid #e5e5e5; padding: 20px 20px;">
          <div style="height: 60px;">
            <img :src="c.avatar" style="float: left; width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">
            <div style="float: left; margin-left: 20px;">
              <span style="font-size: 16px; color: #333; margin-right: 10px;">{{c.username}}</span>
              <br>
              <el-rate
                      v-model="c.score"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                      style="margin-top: 10px;">
              </el-rate>
            </div>
            <div style="float: right; margin-top: 20px;">
              <span style="font-size: 16px; color: #333;">{{c.commentTime}}</span>
            </div>
            <!-- 清除浮动，确保后续内容不会受到影响 -->
            <div style="clear: both;"></div>
          </div>
          <div>
            <span>{{c.content}}</span>
          </div>
          <div style="height: 30px; margin-top: 10px;margin-bottom: 20px;">
            <el-button @click=" replyJump(c.commentId) " style="float: right; margin-right: 20px;" size="small">回复</el-button>


            <div style="clear: both;"></div> <!-- 清除浮动 -->
          </div>
          <el-collapse accordion>
            <el-collapse-item   >
              <template slot="title" >
                 全部 {{c.comment2.length}}  条回复
              </template>
              <div v-for=" (com,index) in c.comment2">
                <div style="width: 90%; margin: 40px auto 20px; border: 1px solid #e5e5e5; padding: 20px 20px;">
                  <div style="height: 60px;">
                    <img :src="com.avatar" style="float: left; width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">
                    <div style="float: left; margin-left: 20px;">
                      <span style="font-size: 16px; color: #333; margin-right: 10px;">{{com.username}}</span>
                      <br>

                    </div>
                    <div style="float: right; margin-top: 20px;">
                      <span style="font-size: 16px; color: #333;">{{com.commentTime}}</span>
                    </div>
                    <!-- 清除浮动，确保后续内容不会受到影响 -->
                    <div style="clear: both;"></div>
                  </div>
                  <div>
                    <span>{{com.content}}</span>
                  </div>
                </div>
              </div>

            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <el-dialog
          title="回复评论："
          :visible.sync="dialogVisible"
          width="50%"

          top="15%"
          :before-close="handleClose">
        <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="replycomment.content"
                maxlength="50"
                show-word-limit>
        </el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="reply()">确 定</el-button>
       </span>
      </el-dialog>
    </div>


  </div>

  <div class="td-footer">
    <p>Company Name</p>
    <p>Address: 123 Street, City, Country</p>
    <p>Email: info@example.com</p>
  </div>
</div>
</body>

<script>


  var v = new Vue({
    el : "#app",
    data() {

      return {
        isSticky: false,
        bookCount: 0,  //小说字数
        chapterzuihou: '', //最近更新章节
        Time: '',  //最近更新时间

        novel:{
          novelId: '',
          title: '',
          authorId: '',
          categoryId: '',
          categoryName: '',
          introduction: '',
          statu: '',
          coverImage: '',

        },
        author: {
          authorId: '',
          authorName: '',
          motto: '',
        },
        chapter: [{
          chapterId: '',
          chapterTitle:'',
          publishDate: '',
          count: 0,

        }],
        user:{
          userId: '',
          username: '',
          avatar: '',
        },
        isLogged: false,
        value: 0,//小说评分



        colors: ['#99A9BF', '#F7BA2A', '#FF9900'], //评分颜色
        comment:{
          commentId: '',
          userId: '',
          novelId: '',
          content: '',//我的评论内容
          commentTime: new Date(),
          score: '',//我的评论评分
          reply: 0,
          replyuser: '',
        },
        comment1: [{
          comment2: [{}],
        }],//1级评论小说评论

        dialogVisible: false,//回复框是否显示

        replycomment:{
          commentId: '',
          userId: '',
          novelId: '',
          content: '',//我的评论内容
          commentTime: new Date(),
          score: '',//我的评论评分
          reply: 0,
          replyuser: '',
        },
        selectneirou: '',//搜索框内容


      };
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);
      // 获取 URL 中的参数值（以 # 号分隔）
      let hashValue = window.location.hash;

      // 去掉 # 号，只保留值部分
      this.novel.novelId  = hashValue.substring(1);
      this.selectId();
      this.selectChapter();
      this.iflogin();







    },
    methods: {

      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      },
      handleScroll() {
        const scrollHeight = window.scrollY || document.documentElement.scrollTop;
        const threshold = 50;

        this.isSticky = scrollHeight > threshold;
      },
      selectId(){
        axios.post('/other/novel/selectId',this.novel).then(res => {
          this.novel = res.data;
          this.selectAuthor();

        });

      },
      selectAuthor(){
        axios.get('/other/author/selectAuthor?authorId='+this.novel.authorId).then(res => {
          this.author = res.data;

        });
      },

      selectChapter(){
        axios.get('/other/selectChapter?novelId='+this.novel.novelId).then(res => {
          this.chapter = res.data;
          this.chapter.forEach(c => {
            this.bookCount = c.count+this.bookCount;
          });
          this.bookCount =  (this.bookCount / 10000).toFixed(2);
          this.chapterzuihou = this.chapter[this.chapter.length-1].chapterTitle;
          this.Time = this.chapter[this.chapter.length-1].publishDate;


        });
      },


      iflogin(){
        axios.get('/user/iflogin').then(res=>{


          if(res.data != ""){
            this.user.userId = res.data
            axios.get('/user/getUser?userId='+this.user.userId).then(res=>{
              this.user = res.data;
            });
            this.isLogged =  true;
          }
          this. queryMyComment();
          this.queryNovelComment();

        });

      },
      logout(){
        axios.post('/user/logout').then(res=>{
          this.isLogged = false;
          this.iflogin();
          window.location.href = "index.html";

        });

      },

      //发表评论
      submitComment() {


        axios.post('/other/comment/submitComment', this.comment).then(res => {
          if (res.data == 1){
            alert('评论成功');
            this.queryNovelComment();
          }
          else if(res.data == 2){

            alert('评论更新成功');
            this.queryNovelComment();
          }
          else{
            alert('评论失败');
          }

        });


      },
      //进入页面时  查询我的评论
      queryMyComment(){
        this.comment.userId = this.user.userId;
        this.comment.novelId = this.novel.novelId;
        this.comment.reply = 1;
        this.comment.replyuser = null;
        axios.post('/other/comment/queryMyComment',this.comment).then(res => {
          if(res.data){
            this.comment = res.data;
          }


        });

      },
      //查询小说评论
      queryNovelComment(){
        axios.get('/other/comment/queryNovelComment?novelId='+this.novel.novelId).then(res => {
          if(res.data != null){
            this.comment1 = res.data;
            let v = 0;
            this.comment1.forEach(c => {
              this.queryReplyComment(c);
               v += c.score
            });
            this.value = v / this.comment1.length;
          }

        });

      },
      //获取userId
      replyJump(commentId){
        this.replycomment.replyuser = commentId;
        this.dialogVisible = true;

      },


      //回复评论
      reply(){

        this.replycomment.userId = this.user.userId;
        this.replycomment.novelId = this.novel.novelId;
        this.replycomment.reply = 2;

        axios.post('/other/comment/replyComment',this.replycomment).then(res => {
          if(res.data == 1){
            alert('回复成功');
            this.dialogVisible = false;
            this.replycomment.content = '';

            this.queryNovelComment();

          }

        });
      },
      //查询 回复
      queryReplyComment(c){
        axios.get('/other/comment/queryReplyComment?replyuser='+c.commentId).then(res => {
          if(res.data){
            c.comment2 = res.data;
          }
          this.$forceUpdate();


        });



      },
      // 搜索
      select(){
        axios.get('/other/select/select?selectneirou='+this.selectneirou).then(res=>{
          if(res.data == "ok"){
            window.location.href = "select.html"
          }

        });

      },
      geren(){
        window.location.href = "user.html"
      },


    }



  })
</script>
</html>
